﻿<template>
  <div class="auth">
    <el-breadcrumb separator="/" >
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>用户认证</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-core">
      <div class="content-header">请选择认证</div>
      <div class="core" >
        <div class="content">
          <span>设计师认证</span>
          <div>
            <img src="@/assets/auth/4.png" @click="changeAuth(1)"></img>
          </div>
        </div>
        <div class="content" >
          <span>工作室认证</span>
          <div>
            <img src="@/assets/auth/1.png" @click="changeAuth(2)"></img>
          </div>
        </div>
        <div class="content">
          <span>企业认证</span>
          <div>
            <img src="@/assets/auth/3.png" @click="changeAuth(3)"></img>
          </div>
        </div>
      </div>
      <div class="core-content" >
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="1050px"
            top="0"
            :close-on-click-modal="false"
        >
          <div class="sketch-content">
            <designer-auth v-if="authType === 1"></designer-auth>
            <studio-auth v-if="authType === 2"></studio-auth>
            <enterprise-auth v-if="authType === 3"></enterprise-auth>
          </div>
        </el-dialog>
      </div>
    </div>
    </div>

</template>

<script>
import DesignerAuth from "@/views/person/auth/components/DesignerAuth";
import StudioAuth from "@/views/person/auth/components/StudioAuth";
import EnterpriseAuth from "@/views/person/auth/components/EnterpriseAuth";
export default {
  name: "Auth",
  components: {EnterpriseAuth, StudioAuth, DesignerAuth},
  data (){
    return {
      authContent:[
        {type:1,title:'设计师认证'},
        {type:2,title:'工作室认证'},
        {type:3,title:'企业认证'},
      ],
      authType:0,
      rules:{},
      title:'',
      open:false
    }
  },
  created() {

  },
  methods: {
    changeAuth(type){
      this.title = this.authContent.find(item => item.type === type).title
      this.open = true
      this.authType = type
    }
  }
}
</script>

<style lang='scss' scoped>
.auth{
  width: 100%;
  height: 100%;
  .content-core{
    margin: 0 auto;
    margin-top: 20px;
    padding: 0 40px;
    .content-header{
      font-weight: bold;
      font-size: 20px;
    }
    .core{
      display: flex;
      justify-content: space-between;
      .content{
        width: 30%;
        height: 30%;
        display: inline-block;
        text-align: center;
        img{
          width: 100%;
          height: 100%;
        }
        img:hover{
          border: 1px dashed #ccc;
        }
      }
    }
    .core-content{
      width: 40%;
      margin: 0 auto;
      margin-top: 20px;
      padding: 0 30px;
    }

  }

}

.sketch-content {
  // 必须有高度 overflow 为自动
  overflow: auto;
  height: 80vh;
  border-top: 1px solid #eff1f4;
  border-bottom: 1px solid #eff1f4;
  padding: 0px 30px 11px 27px;
}

// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
.sketch-content::-webkit-scrollbar {
  width: 3px;
}

// 滚动条里面默认的小方块,自定义样式
.sketch-content::-webkit-scrollbar-thumb {
  background: #8798AF;
  border-radius: 2px;
}

// 滚动条里面的轨道
.sketch-content::-webkit-scrollbar-track {
  background: transparent;
}

</style>
